<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/elementUI.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/elementUI.js"></script>
    <script src="../../../../../lemeng_web_portal/src/main/webapp/js/util.js"></script>
    <style>
        .el-row {
            margin-bottom: 20px;
        &:last-child {
             margin-bottom: 0;
         }
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #ececec;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
            text-align: center;
            padding: 5px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>

</head>
<body>

<div id="app">

    <el-button type="primary" @click="toAdd">上传图片</el-button>
    <el-button type="primary" @click="checkAll">全选/全不选</el-button>
    <el-button type="danger" @click="delAll">批量删除</el-button>

    <el-checkbox-group v-model="checkList" v-if="albumItems.length>0">
        <el-row :gutter="24" >
            <el-col :span="4"style="margin-top: 10px;" v-for="(item,i) in albumItemsPageShow" :key="i">
                <div class="grid-content bg-purple" >
                    <img :src="item.url" alt="" width="180px" height="180px">
                    <el-checkbox :label="item">{{''}}</el-checkbox>
                    <el-button type="text" @click="toMoveAlbum(item)">转移相册</el-button>
                    <el-button type="text" @click="handleDelete(item)">删除图片</el-button>
                </div>
            </el-col>
        </el-row>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.page"
                :page-sizes="[2, 3, 4,5]"
                :page-size="query.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

    </el-checkbox-group>

    <el-empty description="当前相册先没有图片，快去上传吧" v-if="albumItems.length==0"></el-empty>


    <el-dialog
            title="提示"
            :visible.sync="chooseAlbumDialog"
            width="30%">
        <el-form :model="chooseAlbum">
            <el-form-item label="请选择" :label-width="formLabelWidth">
                <el-select v-model="chooseAlbum.newId" placeholder="请选择">
                    <el-option
                            v-for="item in albumList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="moveAlbum">确 定</el-button>
          </span>
    </el-dialog>


    <el-dialog :title="mode.title+'图片'" :visible.sync="dialogFormVisible" top="10px" :before-close="beforeCloseDialog">
        <el-form :model="form">
            <el-form-item label="请选择" :label-width="formLabelWidth">
                <el-upload
                        action="/upload/uploadOss.do"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-success="uploadSuccess"
                        :file-list="fileList"
                        :limit="10"
                        multiple
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" append-to-body>
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addBrand">确 定</el-button>
        </div>
    </el-dialog>

</div>

</body>
<script>
    new Vue({
        el: "#app",
        data: {
            albumItemsPageShow:[],
            albumList:[],
            chooseAlbumDialog:false,
            chooseAlbum:{
                newId:""
            },
            checkList:[],
            albumId:"",
            albumItems:[],
            uploadImgList:[],
            mode:{
                title:"",
                url:""
            },
            fileList:[],
            formLabelWidth:"120px",
            query:{
                page:1,
                size:2
            },
            form:{
                image:"",
                title:"",
            },
            tableData:[],
            total:0,
            multipleSelection:[],
            dialogImageUrl: '',
            dialogVisible: false,
            dialogFormVisible:false
        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initPage()
                }
            }
        },
        methods: {
            moveAlbum(){
                axios.post("/album/moveAlbum.do",this.chooseAlbum).then(res=>{
                    this.chooseAlbum = {
                        newId:""
                    }
                    this.chooseAlbumDialog = false;
                    this.initData()
                })
            },
            toMoveAlbum(item){
                this.chooseAlbum.uid = item.uid;
                this.chooseAlbum.oldId = this.albumId;
                this.chooseAlbumDialog = true;
            },
            checkAll(){
                if(this.checkList.length>0){
                    this.checkList = [];
                }else{
                    this.checkList = this.albumItems;
                }
            },
            goAlbumList(index,row){
                location.href = "album_list.html?id="+row.id
            },
            handleEdit(index, row) {
                this.mode = {
                    title:"修改",
                    url:"/album/update.do"
                }
                this.form = JSON.parse(JSON.stringify(row));//普通输入框的回显
                this.fileList = [{name: row.name, url: row.image}];
                this.dialogFormVisible = true;
            },
            delAll(){
                if(this.checkList.length>0){
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        var obj = {
                            id:this.albumId,
                            uids:this.checkList.map(item=>item.uid).join(",")
                        }
                        this.delBrand(obj);
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }else{
                    this.$message('请选择一条数据');
                }
            },
            handleDelete(item) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var obj = {
                        id:this.albumId,
                        uids:item.uid
                    }
                    this.delBrand(obj);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            delBrand(obj){
                axios.post(`/album/removeImageItems.do`,obj).then(res=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.initData()
                })

            },
            beforeCloseDialog(close){

                this.initFormData();
                close()//关闭弹窗的方法
            },
            addBrand(){
                var obj = {
                    id:this.albumId,
                    imageItems:JSON.stringify(this.uploadImgList)
                }
                axios.post("/album/addImgItem.do",obj).then(res=>{
                    this.initFormData();
                    this.initData()
                })
            },
            toAdd(){
                this.mode = {
                    title:"添加",
                    url:"/album/add.do"
                }
                this.dialogFormVisible = true;
            },
            initFormData(){
                this.uploadImgList = [];

                this.fileList = [];
                this.dialogFormVisible = false;

            },
            initPage(){
                var start = (this.query.page-1)*this.query.size;
                var end = start+this.query.size-1;
                if(end>this.total-1){
                    end = this.total-1;
                }
                this.albumItemsPageShow = []
                for (let i = start; i <= end ; i++) {
                    this.albumItemsPageShow.push(this.albumItems[i])
                }
            },
            initData(){
                axios.get(`/album/findById.do?id=${this.albumId}`).then(res=>{
                    this.albumItems = JSON.parse(res.data.imageItems)
                    this.total = this.albumItems.length
                    this.initPage();
                })

            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                this.query.size = val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },
            handleRemove(file, fileList) {
                for (let i = 0; i < this.uploadImgList.length; i++) {
                    if(this.uploadImgList[i].url==file.response){
                        this.uploadImgList.splice(i,1)
                        break;
                    }
                }
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            uploadSuccess(res,file){
                this.uploadImgList.push({
                    url:res,
                    uid:new Date().getTime(),
                    status:"success"
                })
            },
            initAlbumListData(){
                axios.get("/album/findAll.do").then(res=>{
                    this.albumList = res.data;
                })
            }
        },
        created() {

            this.albumId = getQueryString("id");
            this.initData();
            this.initAlbumListData();
        }
    })
</script>
</html>